<template>
  <div class="brainwave-chart">
    <div class="chart-container">
      <!-- ECharts 图表容器 -->
      <div 
        ref="chartContainer" 
        class="echarts-container"
        :class="{ 'chart-glowing': isRecording }"
      >
        <!-- 这里将放置 ECharts 图表 -->
      </div>
      
      <!-- 图表覆盖层效果 -->
      <div class="chart-overlay">
        <div class="chart-header">
          <h3>脑波实时监测</h3>
          <div class="wave-legend">
            <div 
              v-for="band in waveBands" 
              :key="band.name"
              class="legend-item"
              :style="{ '--band-color': band.color }"
              @click="highlightWave(band.name)"
            >
              <span class="legend-dot"></span>
              <span class="legend-name">{{ band.name }} ({{ band.range }}) - {{ band.percentage }}%</span>
            </div>
          </div>
        </div>
        <div class="lighting-effects">
          <div class="light-flash light-1"></div>
          <div class="light-flash light-2"></div>
          <div class="light-flash light-3"></div>
          <div class="light-flash light-4"></div>
          <div class="light-flash light-5"></div>
        </div>
        <div v-if="isRecording" class="pulse-effect"></div>
        <div class="scan-line"></div>
      </div>
    </div>
    
  </div>
</template>

<script>
import BrainWaveClient from '../utils/BrainWaveClient.js';

export default {
  name: 'BrainWaveChart',
  props: {
    isRecording: {
      type: Boolean,
      default: false
    },
    brainWaveClient: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      // 五个脑波波段 - 优化颜色方案
      waveBands: [
        { name: 'Delta', value: 0, percentage: 0, color: '#E74C3C', active: false, glowing: false, range: '0.5-4Hz' },
        { name: 'Theta', value: 0, percentage: 0, color: '#3498DB', active: false, glowing: false, range: '4-8Hz' },
        { name: 'Alpha', value: 0, percentage: 0, color: '#2ECC71', active: false, glowing: false, range: '8-13Hz' },
        { name: 'Beta', value: 0, percentage: 0, color: '#F39C12', active: false, glowing: false, range: '13-30Hz' },
        { name: 'Gamma', value: 0, percentage: 0, color: '#9B59B6', active: false, glowing: false, range: '30-100Hz' }
      ],
      // 实时数据存储
      realtimeData: {
        rawValue: 0,
        delta: 0,
        theta: 0,
        alpha: 0,
        beta: 0,
        gamma: 0,
        poorSignal: 200,
        attention: 0,
        meditation: 0
      },
      // 泳道图时间序列数据
      timeSeriesData: [],
      maxTimePoints: 60, // 显示60个时间点（约60秒）
      chartWidth: 800,
      chartHeight: 300,
      timeRange: 60, // 时间范围（秒）
      refreshRate: 1000, // 刷新间隔（毫秒）- 每秒更新一次
      chartInstance: null, // ECharts 实例
      animationTimer: null, // 动画定时器
      highlightedBand: null // 当前高亮的波段
    }
  },
  mounted() {
    this.initChart();
    this.startAnimation();
    this.setupWebSocketHandlers();
  },
  beforeUnmount() {
    this.cleanup();
  },
  watch: {
    isRecording(newVal) {
      if (newVal) {
        this.startRealTimeUpdate();
        this.startAnimation();
      } else {
        this.stopRealTimeUpdate();
        this.stopAnimation();
      }
    },
    // 监听brainWaveClient的变化
    brainWaveClient: {
      handler(newClient) {
        if (newClient) {
          console.log('BrainWaveChart: 检测到brainWaveClient变化，重新设置回调');
          this.setupWebSocketHandlers();
        }
      },
      immediate: true // 立即执行一次
    }
  },
  methods: {
    // 初始化图表
    initChart() {
      // 模拟 ECharts 初始化
      console.log('初始化脑波图表');
      this.setupMockChart();
    },
    
    // 设置泳道图表
    setupMockChart() {
      const container = this.$refs.chartContainer;
      if (!container) return;
      
      // 创建SVG泳道图
      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      svg.setAttribute('width', '100%');
      svg.setAttribute('height', '100%');
      svg.setAttribute('viewBox', `0 0 ${this.chartWidth} ${this.chartHeight}`);
      svg.setAttribute('id', 'swimlane-chart');
      
      // 创建渐变定义
      const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
      this.waveBands.forEach((band, index) => {
        const gradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
        gradient.setAttribute('id', `gradient-${band.name}`);
        gradient.setAttribute('x1', '0%');
        gradient.setAttribute('y1', '0%');
        gradient.setAttribute('x2', '100%');
        gradient.setAttribute('y2', '0%');
        
        const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
        stop1.setAttribute('offset', '0%');
        stop1.setAttribute('stop-color', band.color);
        stop1.setAttribute('stop-opacity', '0.8');
        
        const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
        stop2.setAttribute('offset', '100%');
        stop2.setAttribute('stop-color', band.color);
        stop2.setAttribute('stop-opacity', '0.4');
        
        gradient.appendChild(stop1);
        gradient.appendChild(stop2);
        defs.appendChild(gradient);
      });
      svg.appendChild(defs);
      
      // 为每个波段创建面积路径
      this.waveBands.forEach((band, index) => {
        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('fill', `url(#gradient-${band.name})`);
        path.setAttribute('stroke', band.color);
        path.setAttribute('stroke-width', '1');
        path.setAttribute('opacity', '0.9');
        path.classList.add('swimlane-area');
        path.setAttribute('data-band', band.name);
        path.style.transition = 'opacity 0.3s ease-out';
        svg.appendChild(path);
      });
      
      // 添加时间轴网格线
      const gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
      gridGroup.setAttribute('class', 'time-grid');
      gridGroup.setAttribute('opacity', '0.3');
      
      // 垂直网格线（时间刻度）
      for (let i = 0; i <= 10; i++) {
        const x = (i / 10) * this.chartWidth;
        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', x);
        line.setAttribute('y1', 0);
        line.setAttribute('x2', x);
        line.setAttribute('y2', this.chartHeight);
        line.setAttribute('stroke', '#ffffff');
        line.setAttribute('stroke-width', '0.5');
        gridGroup.appendChild(line);
      }
      
      // 水平网格线（百分比刻度）
      for (let i = 0; i <= 4; i++) {
        const y = (i / 4) * this.chartHeight;
        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', 0);
        line.setAttribute('y1', y);
        line.setAttribute('x2', this.chartWidth);
        line.setAttribute('y2', y);
        line.setAttribute('stroke', '#ffffff');
        line.setAttribute('stroke-width', '0.5');
        gridGroup.appendChild(line);
      }
      
      svg.appendChild(gridGroup);
      container.innerHTML = '';
      container.appendChild(svg);
      
      // 初始渲染
      this.renderSwimLaneChart();
      this.animateWaves();
    },
    
    // 渲染泳道图表
     renderSwimLaneChart() {
       const svg = this.$refs.chartContainer?.querySelector('#swimlane-chart');
       if (!svg || this.timeSeriesData.length === 0) return;
       
       const currentTime = Date.now();
       const timeWindow = this.timeRange * 1000; // 转换为毫秒
       
       // 过滤时间窗口内的数据
       const validData = this.timeSeriesData.filter(point => 
         currentTime - point.timestamp <= timeWindow
       );
       
       if (validData.length < 2) return;
       
       // 计算堆叠位置
       const stackedData = validData.map(point => {
         const timeProgress = (currentTime - point.timestamp) / timeWindow;
         const x = this.chartWidth * (1 - timeProgress); // 从右到左
         
         let cumulativeHeight = 0;
         const stackedPoint = {
           x,
           bands: []
         };
         
         // 从下往上堆叠
         for (let i = this.waveBands.length - 1; i >= 0; i--) {
           const percentage = point.percentages[i] || 0;
           const bandHeight = (percentage / 100) * this.chartHeight;
           
           stackedPoint.bands[i] = {
             bottom: this.chartHeight - cumulativeHeight,
             top: this.chartHeight - cumulativeHeight - bandHeight
           };
           
           cumulativeHeight += bandHeight;
         }
         
         return stackedPoint;
       });
       
       // 更新每个波段的路径
       this.waveBands.forEach((band, bandIndex) => {
         const path = svg.querySelector(`path[data-band="${band.name}"]`);
         if (!path) return;
         
         let pathData = '';
         
         // 构建上边界路径（从左到右）
         stackedData.forEach((point, index) => {
           const x = point.x;
           const y = point.bands[bandIndex].top;
           
           if (index === 0) {
             pathData += `M ${x} ${y}`;
           } else {
             pathData += ` L ${x} ${y}`;
           }
         });
         
         // 构建下边界路径（从右到左）
         for (let i = stackedData.length - 1; i >= 0; i--) {
           const point = stackedData[i];
           const x = point.x;
           const y = point.bands[bandIndex].bottom;
           pathData += ` L ${x} ${y}`;
         }
         
         // 闭合路径
         pathData += ' Z';
         
         path.setAttribute('d', pathData);
       });
     },
    
    // 设置WebSocket事件处理器
    setupWebSocketHandlers() {
      console.log('BrainWaveChart: 设置WebSocket处理器', this.brainWaveClient);
      if (this.brainWaveClient) {
        console.log('BrainWaveChart: brainWaveClient存在，设置onBrainData回调');
        // 设置脑电数据接收回调
        this.brainWaveClient.onBrainData = this.handleBrainData;
        console.log('BrainWaveChart: onBrainData回调已设置:', typeof this.brainWaveClient.onBrainData);
      } else {
        console.warn('BrainWaveChart: brainWaveClient不存在，无法设置回调');
      }
    },
    
    // 处理接收到的脑电数据
    handleBrainData(data) {
      console.log('BrainWaveChart接收到脑电数据:', data);
      
      // 检查数据格式并提取比率数据
      let ratios = {};
      
      if (data.details && data.details.average_ratios) {
        // 新格式：从details.average_ratios中提取
        ratios = data.details.average_ratios;
      } else if (data.delta !== undefined) {
        // 旧格式：直接从data中提取
        ratios = {
          delta: data.delta,
          theta: data.theta,
          alpha: data.alpha,
          beta: data.beta,
          gamma: data.gamma
        };
      } else {
        console.warn('未识别的脑电数据格式:', data);
        return;
      }
      
      // 更新实时数据（比率值已经是0-1之间的小数）
      this.realtimeData = {
        rawValue: data.rawValue || 0,
        delta: ratios.delta || 0,
        theta: ratios.theta || 0,
        alpha: ratios.alpha || 0,
        beta: ratios.beta || 0,
        gamma: ratios.gamma || 0,
        poorSignal: data.poorSignal || 0, // 默认为0表示信号良好
        attention: data.attention || 0,
        meditation: data.meditation || 0
      };
      
      console.log('更新后的实时数据:', this.realtimeData);
      
      // 更新波段数值
      this.updateWaveBandValues();
      
      // 触发视觉效果
      this.triggerDataEffects();
    },
    
    // 更新波段数值并标准化为百分比
    updateWaveBandValues() {
      const { delta, theta, alpha, beta, gamma } = this.realtimeData;
      
      // 计算总和用于标准化
      const total = delta + theta + alpha + beta + gamma;
      
      if (total > 0) {
        // 标准化为百分比（总和为100%）
        this.waveBands[0].value = delta;
        this.waveBands[0].percentage = Math.round((delta / total) * 100);
        
        this.waveBands[1].value = theta;
        this.waveBands[1].percentage = Math.round((theta / total) * 100);
        
        this.waveBands[2].value = alpha;
        this.waveBands[2].percentage = Math.round((alpha / total) * 100);
        
        this.waveBands[3].value = beta;
        this.waveBands[3].percentage = Math.round((beta / total) * 100);
        
        this.waveBands[4].value = gamma;
        this.waveBands[4].percentage = Math.round((gamma / total) * 100);
      } else {
        // 没有数据时平均分配
        this.waveBands.forEach(band => {
          band.value = 0;
          band.percentage = 20; // 每个频段20%
        });
      }
      
      console.log('波段百分比更新:', {
        Delta: this.waveBands[0].percentage + '%',
        Theta: this.waveBands[1].percentage + '%',
        Alpha: this.waveBands[2].percentage + '%',
        Beta: this.waveBands[3].percentage + '%',
        Gamma: this.waveBands[4].percentage + '%'
      });
      
      // 添加到时间序列数据
      this.addToTimeSeries();
    },
    
    // 添加数据到时间序列
    addToTimeSeries() {
      const timestamp = Date.now();
      const timePoint = {
        timestamp,
        percentages: this.waveBands.map(band => band.percentage)
      };
      
      this.timeSeriesData.push(timePoint);
      
      // 保持时间序列长度
      if (this.timeSeriesData.length > this.maxTimePoints) {
        this.timeSeriesData.shift();
      }
      
      // 触发泳道图重绘
      this.renderSwimLaneChart();
    },
    
    // 触发数据相关的视觉效果
    triggerDataEffects() {
      // 根据信号质量调整效果
      const signalQuality = this.realtimeData.poorSignal;
      
      // 信号质量好时（poorSignal值小）触发更多效果
      if (signalQuality < 50) {
        // 随机触发灯光效果
        if (Math.random() > 0.7) {
          const randomBand = Math.floor(Math.random() * 5);
          this.triggerLightFlash(randomBand);
        }
      }
      
      // 根据主导波段高亮显示
      this.highlightDominantBand();
    },
    
    // 高亮主导波段
    highlightDominantBand() {
      const values = this.waveBands.map(band => band.value);
      const maxValue = Math.max(...values);
      const dominantIndex = values.indexOf(maxValue);
      
      // 重置所有波段的发光状态
      this.waveBands.forEach(band => {
        band.glowing = false;
      });
      
      // 设置主导波段发光
      if (maxValue > 20) { // 只有当值足够大时才高亮
        this.waveBands[dominantIndex].glowing = true;
      }
    },
    
    // 开始实时更新
    startRealTimeUpdate() {
      console.log('开始实时更新脑波数据');
      // WebSocket连接已在父组件中处理
    },
    
    // 停止实时更新
    stopRealTimeUpdate() {
      console.log('停止实时更新脑波数据');
      // WebSocket断开已在父组件中处理
    },
    
    // 开始动画效果
    startAnimation() {
      console.log('BrainWaveChart: 开始动画');
      this.animateWaves();
    },
    
    // 停止动画
    stopAnimation() {
      if (this.animationTimer) {
        cancelAnimationFrame(this.animationTimer);
        this.animationTimer = null;
      }
    },
    
    // 波浪动画
    animateWaves() {
      let time = 0;
      
      const animate = () => {
        const paths = this.$refs.chartContainer?.querySelectorAll('.swimlane-area');
        if (!paths) return;
        
        paths.forEach((path, index) => {
          const band = this.waveBands[index];
          
          // 高亮处理
          if (path.getAttribute('data-band') === this.highlightedBand || band.glowing) {
            path.setAttribute('stroke-width', '3');
            path.setAttribute('opacity', '1');
            path.style.filter = 'drop-shadow(0 0 8px ' + band.color + ')';
          } else {
            path.setAttribute('stroke-width', '1');
            path.setAttribute('opacity', '0.9');
            path.style.filter = 'none';
          }
        });
        
        time++;
        this.animationTimer = requestAnimationFrame(animate);
      };
      
      animate();
     },
     
     // 触发灯光闪烁
     triggerLightFlash(bandIndex) {
      const lightFlash = this.$refs.chartContainer?.querySelector(`.light-${bandIndex + 1}`);
      if (lightFlash) {
        // 先移除可能存在的旧类
        lightFlash.classList.remove('active');
        
        // 触发重流
        void lightFlash.offsetWidth;
        
        // 添加活动类
        lightFlash.classList.add('active');
        
        // 根据波段设置不同的动画持续时间
        const durations = [300, 400, 500, 600, 700];
        setTimeout(() => {
          lightFlash.classList.remove('active');
        }, durations[bandIndex]);
      }
     },
    
    // 重置图表
    resetChart() {
      console.log('重置图表');
      // TODO: 重置 ECharts 图表
    },
    
    // 高亮波浪线
    highlightWave(bandName) {
      this.highlightedBand = this.highlightedBand === bandName ? null : bandName;
    },
    
    // 清理资源
    cleanup() {
      if (this.animationTimer) {
        cancelAnimationFrame(this.animationTimer);
      }
      if (this.chartInstance) {
        this.chartInstance.dispose();
      }
    }
  }
}
</script>

<style scoped>
.brainwave-chart {
  width: 100%;
  height: 100%;
  max-height: 45vh;
  margin: 0;
  background: linear-gradient(135deg, #87CEEB 0%, #B0E0E6 50%, #E0F6FF 100%);
  border-radius: 15px;
  padding: 15px;
  box-shadow: 0 8px 32px rgba(135, 206, 235, 0.3);
  color: #4682B4;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.brainwave-chart::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(0, 191, 255, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(135, 206, 235, 0.1) 0%, transparent 50%);
  pointer-events: none;
  animation: shimmer 4s ease-in-out infinite alternate;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--band-color);
  box-shadow: 0 0 8px var(--band-color);
  animation: dot-pulse 2s ease-in-out infinite;
}

.swimlane-area {
  transition: opacity 0.3s ease-out, stroke-width 0.3s ease-out;
  transform-origin: center;
}

.time-grid {
  pointer-events: none;
}

.chart-container {
  position: relative;
  flex: 1;
  min-height: 350px;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #1a1a2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.echarts-container {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #1a1a2e, #16213e);
  transition: all 0.3s ease;
}

.echarts-container.chart-glowing {
  box-shadow: 
    inset 0 0 20px rgba(0, 255, 255, 0.3),
    inset 0 0 40px rgba(0, 255, 255, 0.1);
}

.chart-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
}

.chart-overlay .chart-header {
  position: absolute;
  top: 15px;
  left: 20px;
  right: 20px;
  margin-bottom: 0;
  pointer-events: auto;
  z-index: 11;
}

.chart-overlay .chart-header h3 {
  text-align: left;
  margin: 0 0 10px 0;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.chart-overlay .wave-legend {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 0;
}

.chart-overlay .legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
  backdrop-filter: blur(5px);
}

.chart-overlay .legend-item:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-1px);
}

.chart-overlay .legend-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.lighting-effects {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.light-flash {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
  border-radius: 10px;
}

.light-flash.light-1 {
  background: radial-gradient(ellipse at center, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0.1) 40%, transparent 70%);
}

.light-flash.light-2 {
  background: radial-gradient(ellipse at center, rgba(78, 205, 196, 0.3) 0%, rgba(78, 205, 196, 0.1) 40%, transparent 70%);
}

.light-flash.light-3 {
  background: radial-gradient(ellipse at center, rgba(69, 183, 209, 0.3) 0%, rgba(69, 183, 209, 0.1) 40%, transparent 70%);
}

.light-flash.light-4 {
  background: radial-gradient(ellipse at center, rgba(150, 206, 180, 0.3) 0%, rgba(150, 206, 180, 0.1) 40%, transparent 70%);
}

.light-flash.light-5 {
  background: radial-gradient(ellipse at center, rgba(255, 234, 167, 0.3) 0%, rgba(255, 234, 167, 0.1) 40%, transparent 70%);
}

.light-flash.active {
  opacity: 1;
  animation: light-burst 0.3s ease-out;
}

.pulse-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(0, 255, 255, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse-expand 2s ease-in-out infinite;
}

.scan-line {
  position: absolute;
  top: 0;
  left: -2px;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, 
    transparent 0%, 
    #00ffff 20%, 
    #00ffff 80%, 
    transparent 100%);
  box-shadow: 0 0 10px #00ffff;
  animation: scan-move 3s linear infinite;
}

.chart-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 20px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-group label {
  font-size: 0.9rem;
  font-weight: 600;
}

.time-selector,
.refresh-selector {
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: 0.9rem;
}

.reset-btn {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.reset-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.reset-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 动画效果 */
@keyframes dot-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes pulse-expand {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.1;
  }
}

@keyframes scan-move {
  0% {
    left: -2px;
  }
  100% {
    left: 100%;
  }
}

@keyframes light-burst {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes shimmer {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.8;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .wave-legend {
    flex-direction: column;
    align-items: center;
  }
  
  .legend-item {
    width: 100%;
    max-width: 200px;
    justify-content: center;
  }
  
  .chart-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .control-group {
    justify-content: space-between;
  }
}
</style>